<template>

    <div>
        <div class="header-sum-card">
            <Row :gutter="10" class="mt10">
                <Col class="mb10" :lg="24" :md="24" :sm="24" :xs="24">
                    <Card>
                        <span style="font-size: 20px;font-weight: bolder">分类</span>
                    </Card>
                    <Card>
                        <Button size="large" v-for="item in typeList" type="info" shape="circle" ghost
                                style="margin-left: 10px;margin-top: 5px" @click="findByType(item)">{{item.name}}
                        </Button>
                    </Card>
                    <Card>
                        <!--                    博客列表-->
                        <List item-layout="vertical" border>
                            <ListItem v-for="item in typeData" :key="item.id" router>
                                <router-link class="title-font-size" :to="{name:'SBlog',query:{id:item.id}}">
                                    {{item.title}}
                                </router-link>
                                <br/>
                                <router-link style="color: #0F0F0F;font-size: 16px"
                                             :to="{name:'SBlog',query:{id:item.id}}">{{ item.description }}
                                </router-link>

                                <template slot="action" class="avatar-bottom">

                                    <li>
                                        <Icon type="md-eye"/>
                                        {{item.views}}
                                    </li>
                                    <li>
                                        <Icon type="ios-calendar"/>
                                        {{dateFilter(item.updateTime)}}
                                    </li>
                                    <li>
                                        <Tag color="cyan">{{item.type.name}}</Tag>
                                    </li>
                                </template>
                                <template slot="extra">
                                    <router-link class="title-font-size" :to="{name:'SBlog',query:{id:item.id}}"><img
                                            :src="item.firstImageUrl"
                                            style="width: 250px;border-radius: 10px;margin-top: 10px">
                                    </router-link>
                                </template>
                            </ListItem>
                        </List>

                        <!--                        分页导航栏-->
                        <div style="text-align: center;margin-top: 10px;">

                            <Page v-show="this.totals===0?false:true" :total="totals" show-sizer @on-change="page"
                                  @on-page-size-change="changePageSize" :page-size-opts="[8,16,24]" :page-size="8"/>
                        </div>
                    </Card>
                </Col>
            </Row>
        </div>
        <template>
            <BackTop>
                <div style="background-color:#76A09D;border-radius: 50%">
                    <Icon type="md-arrow-round-up"/>
                </div>
            </BackTop>
        </template>
    </div>

</template>
<script>
    export default {
        data() {
            return {
                //分类页的分类列表
                typeList: [],
                //博客列表数据源
                typeData: [],
                //分页总条数
                totals: 0,
                type: {},
            }
        },
        created() {
            this.getTypeBlogList()
            if (this.$route.query.type != undefined) {
                this.findByType(JSON.parse(this.$route.query.type))
            } else {
                this.findByType({})
            }

        },
        methods: {
            //点击对应分类按钮查询博客
            async findByType(type) {
                this.type = type;
                const {data: result} = await this.$http.post("showBlogByType/0/8", type)
                if (result.code === 200) {
                    this.typeData = result.data.content
                    this.totals = result.data.totalElements;

                    // console.log(result)
                }

            },
            //获取分类列表的方法
            async getTypeBlogList() {
                const {data: result} = await this.$http.get("showTypeList")
                this.typeList = result.data
                // console.log(result)
            },
            //格式化时间的方法
            dateFilter: function (input) {
                var d = new Date(input);
                var year = d.getFullYear();
                var month = d.getMonth() < 9 ? "0" + (d.getMonth() + 1) : "" + (d.getMonth() + 1);
                var day = d.getDate() < 10 ? "0" + d.getDate() : "" + d.getDate();
                var hour = d.getHours() < 10 ? "0" + d.getHours() : "" + d.getHours();
                var minutes = d.getMinutes() < 10 ? "0" + d.getMinutes() : "" + d.getMinutes();
                var seconds = d.getSeconds() < 10 ? "0" + d.getSeconds() : "" + d.getSeconds();
                return (year + "-" + month + "-" + day + " " + hour + ":" + minutes + ":" + seconds);
            },
            //分页方法
            async page(currentPage) {
                const {data: result} = await this.$http.post("showBlogByType/" + (currentPage - 1) + "/8", this.type);
                if (result.code === 200) {
                    this.typeData = result.data.content;
                    this.totals = result.data.totalElements;
                }
            },
            //改变每页显示条数的方法
            async changePageSize(pageSize) {
                const {data: result} = await this.$http.post("showBlogByType/0/" + pageSize, this.type);
                if (result.code === 200) {
                    this.typeData = result.data.content;
                    this.totals = result.data.totalElements;
                }
            },
        }
    }
</script>
<style scoped lang="less">
    .mt10 {
        margin-top: 10px;
    }

    .tc {
        text-align: center
    }

    .header-sum-card {
        font-family: 幼圆;

        span.num {
            font-size: 30px;
        }
    }

    .title-font-size {
        font-size: 20px !important;
        font-weight: bolder !important;
        color: black;
    }
</style>
